:host {
  display: block;
  min-height: 100%;
  background: black;
}

.header {
  padding: 10px 0;
  text-align: center;
  font-size: 20px;
  background-color: #0a0a0a;
  position: relative;

  h1 {
    margin: 0;
    color: white;
    font-family: cursive;
    line-height: 1;
  }

  .logo {
    align-self: center;
    font-size: 30px;
  }

  .me {
    position: absolute;
    right: 10px;
    top: 10px;

    button {
      background: #2d2c2c;
      color: white;
      border: #2d2c2c;
    }
  }
}

.body {
  margin: auto;
  max-width: 1900px;
  padding: 10px;
  background-color: #212121;
  min-height: calc(100vh - 60px);

  .title {
    color: white;
    font-size: 18px;
    font-weight: bold;
  }

  .team {
    justify-content: flex-start;

    .item {
      max-width: 20%;
      list-style: none;
      flex: 1;

      .wrap {

        padding: 5px 2vw;

        .card {
          flex-direction: column;
          background: #504f4f;
          padding: 20px 0;
          border-radius: 3px;
          border: 1px solid #504f4f;
          box-shadow: black 0 0 15px;
          cursor: pointer;
          transition: all 0.2s linear;
          position: relative;
          overflow: hidden;

          &:hover {
            background: #666565;
            border-color: #666565;
          }

          .avatar {
            align-self: center;
            height: 110px;
            width: 110px;
            border-radius: 50%;
            border: 2px solid #b7acac;
          }

          .nickname {
            color: #cccccc;
            font-size: 16px;
            text-align: center;
            padding: 10px;
          }

          .prepare {
            margin: auto;
            width: 80px;
            align-self: center;
            line-height: 1;
            padding: 8px 0;
            text-align: center;
            border-radius: 4px;
            border: 1px solid #ecb005;
            background: #ecb005;
            color: rgba(0, 0, 0, 1);
            box-shadow: #ffc800 0 0 5px;
            cursor: pointer;
            transition: all 0.2s linear;

            &:hover {
              background-color: #ffc800;
              border-color: #ffc800;
            }
          }

          .position {
            justify-content: flex-start;
            color: white;
            padding: 10px 5px;

            .head {
              align-self: center;
            }

            .detail {
              flex-wrap: wrap;
              flex: 1;
              justify-content: flex-start;

              .p-item {
                padding: 2px 0;
              }
            }
          }

          .me {
            background-color: #00c800;
            color: white;
            position: absolute;
            top: -45px;
            right: -45px;
            height: 90px;
            text-align: center;
            width: 90px;
            transform: rotate(45deg);

            div {
              position: absolute;
              color: white;
              top: 60px;
              right: 35px;
              transform: rotate(-45deg);
            }
          }

          .tumor {
            background-color: red;
            color: white;
            position: absolute;
            top: -45px;
            left: -45px;
            height: 90px;
            text-align: center;
            width: 90px;
            transform: rotate(-45deg);

            div {
              position: absolute;
              color: white;
              top: 60px;
              right: 35px;
              transform: rotate(45deg);
            }
          }
        }
      }
    }
  }

  .choose-mime {
    width: 600px;
    margin: auto;
    padding: 15px 0;

    .head {
      color: white;
      font-size: 20px;
      font-weight: bold;

      .tips {
        font-size: 16px;
        color: #868686;
      }
    }

    .positions {
      padding: 20px 0;

      .item {
        flex: 1;
        margin: 0 10px;
        text-align: center;
        color: white;
        border: 1px solid grey;
        background-color: grey;
        padding: 5px 0;
        border-radius: 3px;
        cursor: pointer;
        transition: all 0.2s linear;

        &:hover {
          border: 1px solid #9d9d9d;
          background-color: #9d9d9d;
        }

        &.selected {
          border: 1px solid #0E75CE;
          background-color: #0E75CE;

          &:hover {
            border: 1px solid #0e87e2;
            background-color: #0e87e2;
          }
        }
      }
    }

    .prepare {
      text-align: center;

      button {
        width: 200px;
      }
    }
  }

  .result {
    .head {
      color: #f0f0f0;
      font-size: 20px;
      font-weight: bold;
    }

    .result-d {
      justify-content: flex-start;

      .item {
        max-width: 20%;
        list-style: none;
        flex: 1;

        .wrap {

          padding: 5px 2vw;

          .card {
            flex-direction: column;
            background: #504f4f;
            padding: 20px 0;
            border-radius: 3px;
            border: 1px solid #504f4f;
            box-shadow: black 0 0 15px;
            cursor: pointer;
            transition: all 0.2s linear;
            position: relative;
            overflow: hidden;

            &:hover {
              background: #666565;
              border-color: #666565;
            }

            .avatar {
              align-self: center;
              height: 110px;
              width: 110px;
              border-radius: 50%;
              border: 2px solid #b7acac;
            }

            .nickname {
              color: #cccccc;
              font-size: 16px;
              text-align: center;
              padding: 10px;
            }

            .prepare {
              width: 80px;
              align-self: center;
              line-height: 1;
              padding: 8px 0;
              text-align: center;
              border-radius: 4px;
              border: 1px solid #ecb005;
              background: #ecb005;
              color: rgba(0, 0, 0, 1);
              box-shadow: #ffc800 0 0 5px;
              cursor: pointer;
              transition: all 0.2s linear;

              &:hover {
                background-color: #ffc800;
                border-color: #ffc800;
              }
            }

            .position {
              justify-content: flex-start;
              color: white;
              padding: 10px 5px;
              text-align: center;
              font-size: 25px;
            }

            .me {
              background-color: #00c800;
              color: white;
              position: absolute;
              top: -45px;
              right: -45px;
              height: 90px;
              text-align: center;
              width: 90px;
              transform: rotate(45deg);

              div {
                position: absolute;
                color: white;
                top: 60px;
                right: 35px;
                transform: rotate(-45deg);
              }
            }

            .tumor {
              background-color: red;
              color: white;
              position: absolute;
              top: -45px;
              left: -45px;
              height: 90px;
              text-align: center;
              width: 90px;
              transform: rotate(-45deg);

              div {
                position: absolute;
                color: white;
                top: 60px;
                right: 35px;
                transform: rotate(45deg);
              }
            }

            .nobody {
              color: white;
              text-align: center;
            }
          }
        }
      }
    }

    .game-result {
      width: 650px;
      margin: auto;
      text-align: center;
      padding: 30px 0;

      button {
        width: 120px;
      }
    }
  }
}
